<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>{{this.blog.msg}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <el-header>
      <Header></Header>
    </el-header>
    <el-row>
      <el-col :span="21" :offset="1">
        <el-col :span="15">
          <el-input
              style="width:100%; left: 50px; font-size: 28px"
              type="text"
              v-model="blog.blogTitle"
              placeholder="默认标题"
              :value="defaultBlogTitle"
              maxlength="100"
              clearable
              show-word-limit
          >
          </el-input>
        </el-col>
        <el-col :span="7" :offset="2">
          <el-button round >保存草稿箱</el-button>
          <el-button round @click="submitBlog()">发布</el-button>
          <el-button round @click="importFile()">导入MD文件</el-button>
        </el-col>
          <mavon-editor
            :toolbars="toolbars"
            :navigation="true"
            v-model="blog.blogText"
            :subfield="true"
          />
      </el-col>
    </el-row>



    <el-dialog
      :visible.sync="uploadShow"
      width="30%"
      center
    >
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传MD文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script>
import Header from '@/pages/common/header'

export default {
  components: {
    Header,

  },
  data() {
    return {
      uploadShow:false,
      centerDialogVisible:'false',
      defaultBlogTitle:'无标题',
      blog:{
        blogTitle:'',
        blogText:'',
        msg:''
      },
      workCount: '10',

      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    /**
     * 提交博客申请
     */
    submitBlog(){
      console.log(this.blogText)
      console.log(this.blog.blogText)
      console.log(this.blog.blogTitle === '' ? this.defaultBlogTitle: this.blog.blogTitle)
      this.$http({
        url: this.$http.adornUrl('/blog/publish'),
        method: 'post',
        data: this.$http.adornData({
          'blogTitle': this.blog.blogTitle === '' ? this.defaultBlogTitle: this.blog.blogTitle,
          'blogText': this.blog.blogText,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          // this.blog = data.info.blogText
        } else {
          this.centerDialogVisible=true
        }
        this.blog.msg=data.msg
      })

    },
    importFile(){
      this.uploadShow= !this.uploadShow
    },
  },
  beforeCreate() {
    this.centerDialogVisible=false
  },

  created() {
    this.centerDialogVisible=false
  },

  beforeMount() {

  },

  mounted() {

  },

  beforeUpdate() {

  },

  updated() {

  },

  beforeDestroy() {

  },
  destroyed() {

  },

  activated() {

  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.mk_title.v-note-wrapper {
  height: 30px;
  width: 100%;
  right: 50px;
  min-height: 30px;
  margin: auto;
//display: flex; //position: fixed;
}


.v-note-wrapper {
  height: 80%;
  width: 100%;
  left: 50px;
  right: 50px;
  min-height: 500px;
  margin: auto;
//display: flex; //position: fixed;
}
</style>
